<script setup>
    import {userStore} from "../stores/userStore";
    const store=userStore();

    import { ref } from 'vue';
    const activeIndex = ref("1");

    const handleMenuItemClick = (index) => {
        activeIndex.value = index;
    };
</script>
<template>
    <el-container>
         <el-header>
                <el-row>
                    <!-- 1、:span="4" 该元素占4列(一行有24列) 2、flex-direction: row;设置子元素沿水平方向排列 3、align-items: center;定义弹性容器内子元素在交叉轴（与主轴垂直的轴）上的对齐方式。 -->
                    <el-col :span="4" :xs="12" style="display: flex;flex-direction: row;align-items: center;">
                        <img src="/images/logo.png" style="height:60px;padding-right: 8px;"/>
                        <h2>技术社区</h2>
                    </el-col>
                    <el-col :span="8" :xs="12">
                        <!-- 1、default-active 设置默认选中哪一项  2、:ellipsis="false" 设置菜单项在屏幕缩小时不省略显示 -->
                        <el-menu :default-active="activeIndex" mode="horizontal" :ellipsis="false" style="border-bottom: none !important;"> 
                            <el-menu-item index="1"  @click="handleMenuItemClick('1')">
                                <router-link to="/">首页</router-link>
                            </el-menu-item>
                            <el-menu-item index="2" @click="handleMenuItemClick('2')">文章</el-menu-item>
                            <el-menu-item index="3" @click="handleMenuItemClick('3')">课程</el-menu-item>
                            <el-menu-item index="4">
                                <router-link to="/6_mall2" @click="handleMenuItemClick('4')">商场</router-link>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                    <!-- 1、:span="8" 该元素占8列  2、class="hidden-xs-only"当屏幕宽度小于768px时,隐藏该元素 -->
                    <el-col :span="8" class="hidden-xs-only" style="height: 60px;line-height: 60px;">
                        <el-input placeholder="请输入关键字"/>
                    </el-col>

                    <el-col 
                        :span="4" 
                        class="hidden-xs-only" 
                        style="display: flex;flex-direction: row;align-items: center;justify-content: flex-end"
                        v-if="store.isLoggedIn"
                    >
                        <router-link to="/5_profile2"><img src="/images/avatar.png" style="border-radius:50% ;width: 50px;padding-right: 8px;"/></router-link>
                        <span><router-link to="/5_profile2">{{store.user.username}}</router-link></span>
                    </el-col>
                    <el-col 
                        :span="4" 
                        class="hidden-xs-only" 
                        style="height: 60px;line-height: 60px;text-align: right;"
                        v-else    
                    >
                        <el-link type="primary" style="padding-right: 8px;">
                            <router-link to="/4_login">登录</router-link>
                        </el-link>
                        <el-link type="primary">
                            <router-link to="/3_register">注册</router-link>
                        </el-link>
                    </el-col>
                </el-row>
            </el-header>
    </el-container>
</template>

<style scoped>               
    a{text-decoration: none;}
</style>